<template>
  <div class="nav">
    <ul>
      <li v-for="(v,i) in this.$store.state.tidem.navarr" @click="fun(i,v.title)" :key="i">
        <img :src="v.img">
        <span>{{v.title}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
    mounted(){
        this.$store.dispatch("actionsnav")
    },
    methods: {

      fun(i,title){
        if(i!=1001){
          // this.$router.push("/gmenua")
           this.$router.push({name:"gmenua",query:{type:title}})
        }else{
          this.$router.push("/tidetype")
          //  this.$router.push({name:"goodsmenu",query:{type:title}})
        }
        
      }
    },
}

</script>

<style scoped>
    .nav{
      width: 95%;
      height: 1.82rem;
      margin: auto;
      margin-top: 0.2rem;
      background-color: #fff;
      border-radius: 0.07rem;
      overflow: hidden;
    }
    .nav ul{
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    .nav ul li{
      width: 20%;
      height: 0.91rem;
      /* border: 1px solid #000; */
      box-sizing: border-box;
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

    }
    .nav ul li img{
      display: block;
      width:70%;
      height: 70%;
    }
    .nav ul li span{
      font-size: 0.01rem;
    }

</style>